<script setup>
import { ref } from 'vue'
import { doctorClassifySaveAPI } from '@/api/doctorClassify'
import { patientClassifySaveAPI } from '@/api/patientClassify'

// 显示抽屉
const visibleDrawer = ref(false)

// 记录打开抽屉的类型
const classifyType = ref('')

// 表单数据
const classifyForm = ref({
  id: '',
  classifyName: '',
  classifyDec: ''
})

// 绑定表单
const formRef = ref(null)

// 定义通知父组件的方法
const emit = defineEmits(['refresh'])

/**
 * 提交表单
 */
const submit = async () => {
  // 分类类型为医生分类
  if (classifyType.value === 'doctorClassify') {
    // 调用api
    await doctorClassifySaveAPI(classifyForm.value)
  }
  // 分类类型为患者分类
  else if (classifyType.value === 'patientClassify') {
    // 调用api
    await patientClassifySaveAPI(classifyForm.value)
  }

  // 关闭抽屉
  visibleDrawer.value = false
  // 清空表单
  formRef.value.resetFields()
  // 通知父组件刷新页面
  emit('refresh')
  // 提示操作成功
  if (classifyForm.value.id) {
    ElMessage.success('修改分类成功')
  } else {
    ElMessage.success('添加分类成功')
  }
}

// 打开抽屉
const open = async (type, row) => {
  // 记录打开抽屉的类型
  classifyType.value = type
  if (row) {
    // 表单数据赋值, 使用展开运算符, 赋值给表单数据
    classifyForm.value = { ...row }
  } else {
    // 表单数据清空
    classifyForm.value = {
      id: '',
      classifyName: '',
      classifyDec: ''
    }
  }

  // 打开抽屉
  visibleDrawer.value = true
}

// 向父组件暴露open
defineExpose({
  open
})
</script>

<template>
  <!-- 抽屉 -->
  <el-drawer
    v-model="visibleDrawer"
    direction="rtl"
    size="30%"
    :append-to-body="true"
  >
    <template v-slot:title>
      <el-text
        class="mx-1"
        type=""
        size="large"
        :strong="true"
      >
        {{ classifyForm.id ? '修改分类' : '添加分类' }}
      </el-text>
    </template>
    <!-- 表单 -->
    <el-form
      size="large"
      label-width="100px"
      :model="classifyForm"
      ref="formRef"
      :rules="rules"
    >
      <!-- 分类名称 -->
      <el-form-item label="分类名称:" prop="classifyName">
        <el-input
          v-model="classifyForm.classifyName"
          placeholder="请输入分类名称"
        ></el-input>
      </el-form-item>

      <!-- 分类描述 -->
      <el-form-item label="分类描述:" prop="classifyDec">
        <el-input
          type="textarea"
          v-model="classifyForm.classifyDec"
          :autosize="{ minRows: 5, maxRows: 10 }"
          style="width: 250px"
          placeholder="请输入分类描述"
        ></el-input>
      </el-form-item>
    </el-form>

    <!-- 按钮 -->
    <div class="button-group">
      <el-button type="primary" @click="submit">
        确认
      </el-button>
      <el-button @click="visibleDrawer = false">
        取消
      </el-button>
    </div>
  </el-drawer>
</template>

<style scoped lang="scss">
// 设置输入框的宽度
.el-input {
  width: 60%;
}

// 设置按钮的样式
.button-group {
  // 距离上面20px
  margin-top: 30px;
  // 左一点的位置
  margin-left: 100px;
  // 设置按钮间距
  button {
    margin-right: 20px;
  }
}
</style>
